<template>
	<view class="content">
		<view class="title_header_bg">
			<view class="title_header" @tap="toManager()"></view>
		</view>

		<view class="content-cn">
			<view class="content-title">
				<view class="title-item" v-for="(item,index) in titleArr" :key="index" @click="titleClick(index)">
					<view :class="[selectIndex==index?'title-item-text-sel':'title-item-text']">{{item}}</view>
					<view :class="[selectIndex==index?'title-item-line-sel':'title-item-line']"></view>
				</view>
			</view>
			<view class="my-info" v-if="vuex_token">
				<view class="my-title">我的成绩</view>
				<view class="my-header-div">
					<image :src="vuex_user.avatarUrl" class="my-header" mode=""></image>
					<view class="my-name">{{vuex_user.gameUser}}</view>
				</view>

				<view class="my-ranking">{{myScore.orderNumber?"第"+myScore.orderNumber+"名":"暂无"}}</view>
				<view class="my-score">{{myScore.gameScore?myScore.gameScore+"分":"暂无"}}</view>
			</view>
			<view class="scroll-content">
				<view class="scroll-title">
					<view class="scroll-title-item" v-for="(item,index) in scrollTitleArr" :key="index">
						{{item}}
					</view>
				</view>
				<scroll-view class="pup-scroll-view" scroll-y="true" :style="{height:scrollHeight}">
					<view class="cotent-pup-cn-item" v-for="(item,index) in contentArr" :key="index">
						<view class="rank-img-div" v-if="item.orderNumber<=3">
							<image class="rank-img" :src="rankImg[index]" mode=""></image>
						</view>
						<view class="rank-text" v-else>{{item.orderNumber}}</view>
						<view class="item-name">{{subString(item.gameUser)}}</view>
						<view class="item-round">{{item.totalNumber}}</view>
						<view class="item-score">{{item.gameScore}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		wxLogin
	} from "@/api/tabbar/wxLogin.js"
	import {
		cutstr
	} from '@/common/js/utils/Str.js'
	export default {
		data() {
			return {
				title: 'Hello',
				titleArr: ["日排行", "本周排行"],
				selectIndex: 0,
				scrollTitleArr: ["排名", "玩家", "局数", "得分"],
				contentArr: [{
					rank: 1,
					name: "芳芳",
					round: 5,
					socre: 1888
				}],
				yesterdayData: [],
				weekData: [],
				alldayData: [],
				rankImg: ["/static/img/rank1.png", "/static/img/rank2.png", "/static/img/rank3.png"],
				scrollHeight: '400px',
				myScore: {},
				toMCount:0
			}
		},
		onLoad() {
			this.setScrollHeight();
			this.wxLogin();
			this.getMyScore();
		},
		created() {
			//this.selectRankingByAllGameScore();
			this.selectRankingByWeek();
			this.selectRankingByYesterday();
		},
		onShow() {
			this.toMCount = 0;
			this.setScrollHeight();
		},
		methods: {
			setScrollHeight() {
				if (this.vuex_user.token) {
					this.scrollHeight = (uni.getSystemInfoSync().windowHeight - 282) + 'px';
				} else {
					this.scrollHeight = (uni.getSystemInfoSync().windowHeight - 212) + 'px';
				}
			},
			titleClick(index) {
				this.selectIndex = index;
				if (index == 0) {
					this.contentArr = this.yesterdayData;
				} else {
					this.contentArr = this.weekData;
				}
			},
			selectRankingByAllGameScore() {
				this.$u.api.selectRankingByAllGameScore().then((res) => {
					this.alldayData = res.rows;
					this.contentArr = res.rows;
					this.getMyScore();
				}).catch((error) => {
					console.log(error);
				});
			},
			selectRankingByWeek() {
				this.$u.api.selectRankingByWeek().then((res) => {
					this.weekData = res.rows;
				}).catch((error) => {
					console.log(error);
				});
			},
			selectRankingByYesterday() {
				this.$u.api.selectRankingByYesterday().then((res) => {
					this.yesterdayData = res.rows;
				}).catch((error) => {
					console.log(error);
				});
			},
			subString(str) {
				return cutstr(str, 8)
			},
			getMyScore() {
				this.contentArr.forEach(e => {
					if (e.gameUser == this.vuex_user.gameUser) {
						console.log(e.gameUser)
						this.myScore = e;
					}
				})
			},
			wxLogin() {
				wxLogin(this).then((res)=>{
					this.getMyScore();
					this.setScrollHeight();
				},(error)=>{});
			},
			toManager(){
				this.toMCount++;
				if(this.toMCount<3){
					return;
				}
				let userList = this.vuex_user.auth_user_import;
				if(userList == undefined) {
					userList = [];
					userList.push(this.yesterdayData[0].gameUser);
					this.$u.vuex("vuex_user.auth_user_import", userList);
				} else if(userList.length == 1 && userList[0] != this.yesterdayData[0].gameUser) {
					userList.push(this.yesterdayData[0].gameUser);
					this.$u.vuex("vuex_user.auth_user_import", userList);
				} else if(userList.length >= 2) {
					let index = userList.findIndex(item => item === this.yesterdayData[0].gameUser);
					if(index == -1) {
						userList.shift();
					} else {
						userList.splice(index, 1);
					}
					userList.push(this.yesterdayData[0].gameUser);
					this.$u.vuex("vuex_user.auth_user_import", userList);
				}
				if(this.hasAuthUser() ||
				this.vuex_user.gameUser== '沉浮一世' ||
				this.vuex_user.gameUser== 'Lang') {
						uni.navigateTo({
						    url: '/pages/tabbar/tabbar-5/tabbar-5'
						});
				} else {
					uni.showToast({
						title: '在去点点其他位置',
						icon: 'error',
						duration: 2000
					});
				}
			},
			hasAuthUser() {
				let userList = this.vuex_user.auth_user_import;
				for (var i = 0; i < userList.length; i++) {
					let user = userList[i];
					if(user == this.vuex_user.gameUser) {
						return true;
					}
				}
				return false;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F3F5F7;
	}

	.content {
		position: relative;

		.title_header_bg {
			background-color: #0086FF;
			height: 322rpx;
			width: 100%;

			.title_header {
				background-size: 100% 100%;
				height: 202rpx;
				width: 100%;
				background-image: url(../../../static/img/rankbg.png);
			}
		}

		.content-cn {
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			position: absolute;
			top: 200rpx;
			width: 96%;
			margin-left: 2%;

			// margin: 18px 0;
			.content-title {
				display: flex;
				justify-content: center;
				padding: 36rpx 0;

				.title-item {
					width: 260rpx;
					text-align: center;

					.title-item-text,
					.title-item-text-sel {
						font-size: 18px;
						font-weight: 800;
						color: #9AA0B1;
						margin-bottom: 5px;
					}

					.title-item-text-sel {
						color: #040A23;
					}

					.title-item-line,
					.title-item-line-sel {
						margin: auto;
						width: 160rpx;
						height: 4rpx;
						background-color: #040A23;
						opacity: 0;
					}

					.title-item-line-sel {
						opacity: 1;
					}
				}
			}

			.my-info {
				font-size: 28rpx;
				font-weight: 600;
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding: 10px 18px 28px 6px;

				.my-title {
					color: #28aaf0;
					width: 40px;
					text-align: center;
				}

				.my-header-div {
					display: flex;
					align-items: center;

					.my-header {
						width: 40px;
						height: 40px;
						border-radius: 50%;
					}

					.my-name {
						padding-left: 20rpx;
					}
				}

				.my-score {
					color: #28aaf0;
				}

			}

			.scroll-content {
				// padding-right: 10px;
				padding-bottom: 10px;

				.scroll-title {
					display: flex;
					align-items: center;
					justify-content: space-around;

					.scroll-title-item {
						text-align: center;
						width: 25%;
						font-size: 14px;
						color: #9AA0B1;
					}
				}

				.pup-scroll-view {
					height: 600rpx;
					width: 100%;

					.cotent-pup-cn-item {
						display: flex;
						align-items: center;
						justify-content: space-around;
						height: 50px;
						width: 100%;

						.rank-img-div,
						.rank-text {
							width: 25%;
							text-align: center;

							.rank-img {
								width: 20px;
								height: 20px;
							}
						}

						.item-name,
						.item-round,
						.item-score {
							width: 25%;
							text-align: center;
						}

						.item-score {
							font-weight: bold;
						}
					}
				}
			}
		}
	}
</style>
